const menuBtn = document.getElementById('menu-btn')
const menuBtnIcon = menuBtn.querySelector('i')
const navLinks = document.getElementById('nav-links')

menuBtn.addEventListener('click', ()=>{
    navLinks.classList.toggle('open')

    const isOpen = navLinks.classList.contains('open')
    // 3- 与 × 的切换
    menuBtnIcon.setAttribute('class', isOpen ? 'ri-close-line': 'ri-menu-line')
})

navLinks.addEventListener('click', (e)=>{
    navLinks.classList.remove('open')
    menuBtnIcon.setAttribute('class', 'ri-menu-line')
})


const scrollRevealOption = {
    distance: '50px',
    origin: 'bottom',
    duration: 1000
}
/**
 * 动画: 从右侧出来进行1000ms的50px位移动画
 */
ScrollReveal().reveal('.header__image img', {
    ...scrollRevealOption,
    origin: 'right'
})
// 延迟500ms后进行动画
ScrollReveal().reveal('.header__content h1', {
    ...scrollRevealOption,
    delay: 500
})
ScrollReveal().reveal('.header__content .section__description', {
    ...scrollRevealOption,
    delay: 1000
})
ScrollReveal().reveal('.header__btn', {
    ...scrollRevealOption,
    delay: 1500
})
ScrollReveal().reveal('.header__stats', {
    ...scrollRevealOption,
    delay: 2000
})

// ****************** about *************************
ScrollReveal().reveal('.about__image img', {
    ...scrollRevealOption,
    origin: 'left'
})
// 每一个 .section__description 会在上一个 .section__description 出现后, 500ms后再出现 （interval: 500）
ScrollReveal().reveal('.about__content .section__description', {
    ...scrollRevealOption,
    delay: 1000,
    interval: 500
})
ScrollReveal().reveal('.about__image img', {
    ...scrollRevealOption,
    origin: 'left'
})
ScrollReveal().reveal('.about__container .about__btn', {
    ...scrollRevealOption,
    delay: 2000
})

// ****************** program *************************
ScrollReveal().reveal('.program__card', {
    ...scrollRevealOption,
    interval: 500
})
// ****************** service *************************
ScrollReveal().reveal('.service__image img', {
    ...scrollRevealOption,
    origin: 'right'
})
ScrollReveal().reveal('.service__container .section__header', {
    ...scrollRevealOption,
})
ScrollReveal().reveal('.service__list li', {
    ...scrollRevealOption,
   delay: 500,
   interval: 500
})
ScrollReveal().reveal('.service_btn', {
    ...scrollRevealOption,
    delay: 2000,
})
// ****************** swiper *************************
const swiper = new Swiper('.testimonal__swiper>.swiper', {
    loop: true
})

